<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套路由</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        #app {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        .menu-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .menu-container a {
            display: inline-block;
            padding: 10px 20px;
            margin: 0 10px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .menu-container a:hover {
            background-color: #0056b3;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        li {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            display: inline-block;
            width: 100%;
            text-align: left;
        }

        li:last-child {
            margin-bottom: 0;
        }

        .sub-menu {
            margin-top: 20px;
        }

        .sub-menu a {
            display: block;
            padding: 10px 20px;
            margin: 10px 0;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .sub-menu a:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>

    <!-- 一级 -->
    <template id="oneMenu">
        <div>
            <h1>董事会</h1>
            <div class="menu-container">
                <router-link to="/dsh/scjl">市场经理</router-link>
                <router-link to="/dsh/rsjl">人事经理</router-link>
                <router-link to="/dsh/cpjl">产品经理</router-link>
            </div>
            <router-view></router-view>
        </div>
    </template>

    <!-- 二级 -->
    <template id="scjl">
        <div>
            <h1>市场经理</h1>
            <div class="sub-menu">
                <router-link to="/dsh/scjl/scjlxs">下属部门</router-link>
            </div>
            <router-view></router-view>
        </div>
    </template>

    <!-- 二级 -->
    <template id="rsjl">
        <div>
            <h1>人事经理</h1>
            <div class="sub-menu">
                <router-link to="/dsh/rsjl/rsjlxs">下属部门</router-link>
            </div>
            <router-view></router-view>
        </div>
    </template>

    <!-- 二级 -->
    <template id="cpjl">
        <div>
            <h1>产品经理</h1>
            <div class="sub-menu">
                <router-link to="/dsh/cpjl/cpjlxs">下属部门</router-link>
            </div>
            <router-view></router-view>
        </div>
    </template>

    <!-- 三级 -->
    <template id="scjlxs">
        <div>
            <ul>
                <li>市场部</li>
                <li><router-link to="/dsh/scjl/scjlxs/scjlxs/sjxs">设计部</router-link></li>
                <li>业务部</li>
                <li><router-link to="/dsh/scjl/scjlxs/scjlxs/fwxs">客服部</router-link></li>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <!-- 三级 -->
    <template id="rsjlxs">
        <div>
            <ul>
                <li>财务部</li>
                <li>行政部</li>
                <li>人力资源部</li>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <!-- 三级 -->
    <template id="cpjlxs">
        <div>
            <ul>
                <li>网络部</li>
                <li><router-link to="/dsh/cpjl/cpjlxs/cpjlxs/kfxs">开发部</router-link></li>
                <li>技术部</li>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <!-- 四级 -->
    <template id="sjxs">
        <ul>
            <li>设计一部</li>
            <li>设计二部</li>
        </ul>
    </template>

    <!-- 四级 -->
    <template id="fwxs">
        <ul>
            <li>客户服务</li>
            <li>技术支持</li>
        </ul>
    </template>

    <!-- 四级 -->
    <template id="kfxs">
        <ul>
            <li>开发一部</li>
            <li>开发二部</li>
        </ul>
    </template>
</body>

</html>

<script type="module">
    import {} from './js/2.7.14_dist_vue.js';
    import {} from './js/vue-router.js';

    Vue.use(VueRouter);

    let dsh = { template: '#oneMenu' };
    let scjl = { template: '#scjl' };
    let rsjl = { template: '#rsjl' };
    let cpjl = { template: '#cpjl' };
    let scjlxs = { template: '#scjlxs' };
    let rsjlxs = { template: '#rsjlxs' };
    let cpjlxs = { template: '#cpjlxs' };
    let sjxs = { template: '#sjxs' };
    let fwxs = { template: '#fwxs' };
    let kfxs = { template: '#kfxs' };

    let routes = [
        { path: '/', redirect: '/dsh' }, // 重定向
        {
            // 董事会
            path: '/dsh',
            component: dsh,
            children: [
                {
                    // 市场经理
                    path: 'scjl',
                    component: scjl,
                    children: [
                        // 下属
                        { path: 'scjlxs', 
                          component: scjlxs,
                          children: [
                              // 下属下属
                              { path: 'scjlxs/sjxs', component: sjxs },
                              { path: 'scjlxs/fwxs', component: fwxs }
                          ]
                        }
                    ]
                }, {
                    // 人事经理
                    path: 'rsjl',
                    component: rsjl,
                    children: [
                        // 下属
                        { path: 'rsjlxs', component: rsjlxs }
                    ]
                }, {
                    // 产品经理
                    path: 'cpjl',
                    component: cpjl,
                    children: [
                        // 下属
                        { path: 'cpjlxs',
                          component: cpjlxs,
                          children: [
                              // 下属下属
                              { path: 'cpjlxs/kfxs', component: kfxs }
                          ]
                        }
                    ]
                }
            ],
        }
    ];

    let router = new VueRouter({
        routes
    });

    new Vue({
        el: '#app',
        data: {
            msg: '嵌套路由'
        },
        router
    });
</script>